<template>
  <div class="home">
    <div class="box1">
      <div>余额</div>
      <div style="font-size: 1.5rem; margin-top: 0.5rem">
        ￥{{ balance }}
      </div>
    </div>
  
    <div class="box2">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
         @load="onLoad"
      >
          <div v-for="(item,index) in data" :key="index"  class="list">
                  <div>
                      订单号: {{item.ordersn}}
                  </div>
                  <div>
                    <div>
                      充值金额:{{item.price}}
                    </div>
                    <div>
                      时间:{{item.suctime}}
                    </div>
                  </div>
          </div>
      </van-list>
    </div>
  
    <div class="box2" v-if="data.length === 0">
      <van-empty description="暂无充值数据" />
    </div>
  </div>
</template>
<script>
let t;
import {hideWxMenu } from '@/assets/js/tools'
export default {
  name: "home",
  data() {
    return {
      czIndex: 0,

      params: {
        openid: localStorage.getItem("openid"),
        page: 0,
        limit: 10,
      },
      count: 0,
      balance:0,
      data: [],
       loading: false,
      finished: false,
    };
  },
  mounted() {
    t = this;
   
     hideWxMenu()
  },
  methods: {
    onLoad(){
        let t=this;
      this.params.page++;
    
      
  
      this.getList();
    },
    getList() {
      t["$API"]["userCzlog"](t.params).then((res) => {
         this.loading = false;
        if (res.code == 200) {
          t.count = res.data.count;
           t.balance = res.data.balance;    
           if(t.params.page==1){
               t.data=[];
              t.data = res.data.data;
           }else{
              t.data=t.data.concat(res.data.data)
           }

              if (t.data.length >=t.count) {
            this.finished = true;
          }
        }else{
           t.data=[];
          this.finished = true;
        }
      });
    },
    linkTo() {
      this.$router.push({ name: "coupon" });
    },
  },
};
</script>
<style scoped lang="less">
.home {
  height: 100vh;
  background: #e8e8e8;
}
.box1 {
  background: #376157;
      background-image: linear-gradient(45deg, #376157, #00b894);
  padding: 1rem 0;

  color: white;
  text-align: center;
}
.box2{
  .list{
    background: white;
    margin: .5rem;
  
    >div{
        padding: .8rem;
    }
    >div:nth-child(1){
      color: #376157;
        padding-bottom: .5rem;
    }
    >div:nth-child(2){
      padding-top: 0;
      display: flex;
      >div{
        font-size: .9rem;

      }
      >div:nth-child(1){
        flex: 1;
        color: #376157;
      }
      >div:nth-child(2){
        color: #376157;
      }
    }

  }
}
</style>
 